
<template>
  <div class="app-container">   
    <el-row>
      <el-col :sm="24" :lg="16" :offset="4">
         
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-if="showSearch" label-width="68px">
      <el-form-item :label="chartInfo.ds.searchLabel" prop="searchValue">
        <el-select v-model="queryParams.searchValue" placeholder="请选择" style="width: 160px" clearable>
          <el-option
            v-for="dict in searchOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>  
    <div v-else style="height:120px"></div>
    
    <charts :chart-info="chartInfo" />   
      </el-col>
    </el-row> 
  </div>
</template>

<script setup name="ChartView">
import { getChartInfo } from "@/api/dev/chart";
import { queryDs } from "@/api/dev/dataset";
import Charts from '@/components/Charts/index'

const route = useRoute();

const chartInfo = ref(null);
const queryParams = ref({});

const showSearch = ref(false);
const searchOptions = ref([]);

(() => {
  const chartCode = route.query && route.query.code;
  if (chartCode) {
    getChartInfo(chartCode).then(response=>{
        chartInfo.value = response.data;
        if(chartInfo.value == null || chartInfo.value.ds == null || chartInfo.value.ds.searchExp == '0')
        {
            showSearch.value = false;
        }else{
            showSearch.value = true;
            queryDs({code:chartInfo.value.ds.searchDs}).then(response=>{
                searchOptions.value = response.data;
            })
        }
    })
  }
})();


</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
